<div class="carControl-content">

  <div class="carControl-closeDialogBtn">
    <button class="closeDialog-btn" apes-button [apesSize]="'default'" (click)="closeDialogBtn()">×</button>
  </div>

  <!--  <div>{{carInfo | json}}</div>-->

  <!--  <div>{{carFeeDetails | json}}</div>-->

  <!--  <div>{{carSolutionInformation | json}}</div>-->

  <p class="carControl-title">车辆信息</p>
  <div class="carControl-carInfo">
    <div class="carInfo-left">
      <div class="carInfo-logo">
        <img [src]="carInfo['logo']" alt="">
      </div>
    </div>
    <div class="carInfo-right">
      <div class="carInfo-right-top">
        <div>{{carInfo['CAR_LICENSE']}}</div>
      </div>
      <div class="carInfo-right-center">
        <div class="customer-name">
          <span class="car-title">车主信息：</span>
          {{carInfo['CUSTOMER_NAME']}}-{{showHidden(carInfo['MOBILE'])}}
          <div class="carInfo-showHidden-icon" (click)="showHideBtn = !showHideBtn;">
            <i *ngIf="!showHideBtn" apes-icon apesType="eye-invisible"></i>
            <i *ngIf="showHideBtn" apes-icon apesType="eye"></i>
          </div>
        </div>
        <div class="mileage">
          <span class="car-title">公里数：</span>
          {{filterValue(carInfo['MILEAGE'])}}km</div>
      </div>
      <div class="carInfo-right-bottom">
        <div class="car-model">
          <span class="car-title">车型：</span>
          {{filterValue(carInfo['CAR_MODEL'])}}</div>
      </div>
    </div>
  </div>

  <p class="carControl-title">费用明细</p>
  <div class="carControl-carFeeDetails">
    <div class="carFeeDetails-top">
      <div>总金额: ¥{{filterValue(carFeeDetails['total'])}}</div>
    </div>
    <div class="carFeeDetails-center">
      <div style="width: 30%">
        <span class="car-title">方案：</span>
        ¥{{filterValue(carFeeDetails['planTotal'])}}</div>
      <div style="width: 30%">
        <span class="car-title">工时：</span>
        ¥{{filterValue(carFeeDetails['planWorkDetail'])}}</div>
      <div style="width: 30%">
        <span class="car-title">配件：</span>
        ¥{{filterValue(carFeeDetails['planPartDetail'])}}</div>
    </div>
    <div class="carFeeDetails-bottom">
      <div style="width: 30%">
        <span class="car-title">定损：</span>
        ¥{{filterValue(carFeeDetails['lossTotal'])}}</div>
      <div style="width: 30%">
        <span class="car-title">工时：</span>
        ¥{{filterValue(carFeeDetails['lossWorkDetail'])}}</div>
      <div style="width: 30%">
        <span class="car-title">配件：</span>
        ¥{{filterValue(carFeeDetails['lossPartDetail'])}}</div>
    </div>
  </div>


  <p class="carControl-title">方案信息</p>
  <ng-container *ngIf="carSolutionInformation.length != 0">
    <div *ngFor="let carItems of carSolutionInformation;let i = index;"
         class="carControl-carSolutionInformation">
      <div class="carFeeDetails-title">
        <div class="carFeeDetails-id">{{carItems['ID']}}</div>
        <div>
          <span class="car-title">状态：</span>
          {{carItems['STATE']}}</div>
        <div>
          <span class="car-title">创建时间：</span>
          {{carItems['CREATE_DATE']}}</div>
        <div>
          <span class="car-title">耗时：</span>
          {{carItems['TIME_CONSUME']}}</div>
        <div>
          <span class="car-title">业务员：</span>
          {{carItems['CREATOR']}}</div>
      </div>
      <div class="carFeeDetails-grid">
        <!--        <div>表格数据：{{carItems['Items'] | json}}</div>-->
        <ag-grid-angular #agGrid style="width: 100%"
                         [ngStyle]="{ height: '150px'}"
                         class="ag-theme-balham"
                         enableColResize="true"
                         enableSorting="true"
                         suppressLoadingOverlay="true"
                         [modules]="modules"
                         [rowData]="carItems['Items']"
                         [masterDetail]="true"
                         [localeText]="localeText"
                         [animateRows]="true"
                         [columnDefs]="carColumnDefs"
                         (gridReady)="onGridReady($event)"></ag-grid-angular>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="isLoading">
    <div>
      加载中...
    </div>
  </ng-container>
  <ng-container *ngIf="carSolutionInformation.length == 0 && !isLoading">
    <div class="carControl-msg-text">
      暂时没有业务。如需做单“
      <span (click)="openToBill(carInfo)">请开单</span>
      ”!
    </div>
  </ng-container>


</div>
